<template>
  
  <!-- 就业人员 -->
  <div class="container contabox">
    <UnifyTitle />
    <!--    <UnifyTitle/>-->
    <!-- 检索区 -->
    <div class="inp">
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <el-form-item label="就业姓名">
          <!-- <el-input class="divInput" v-model="form.name"></el-input> -->
          <input class="input" v-model="searchForm.name" type="text">
        </el-form-item>
        <el-form-item label="联系方式">
          <!-- <el-input v-model="form.name"></el-input> -->
          <input class="input" v-model="searchForm.contactWay" type="text">
        </el-form-item>
        <el-form-item label="身份证号">
          <!-- <el-input v-model="form.name"></el-input> -->
          <input class="input" v-model="searchForm.idCard" type="text">
        </el-form-item>
        <el-form-item label="添加时间">
          <!-- <el-input v-model="form.name"></el-input> -->
          <input class="input" v-model="searchForm.name" type="text">
        </el-form-item>
        <el-form-item label="标签">
          <!-- <el-input v-model="form.name"></el-input> -->
          <input class="input" v-model="searchForm.name" type="text">
        </el-form-item>
        <el-form-item label="来源">
          <!-- <el-input v-model="form.name"></el-input> -->
          <input class="input" v-model="searchForm.name" type="text">
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="searchButton" type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div
      class="flex space-between bgFFF bdradius4"
      style="height: 100%"
    >
      <!-- 左侧区域菜单 --> 
      <div
        class="tree-list bdrf2f2f2 pl5 pt15 pr5"
        style="width: 290px; overflow: auto"
      >
        <div class="block">
          <org-structure
            ref="orgStructure"
            requestName="departmentList"
            @search="onTreeSearch"
            @deptListData="getDeptListData"
          ></org-structure>
        </div>
      </div>
      <div
        class="btn-section"
        style="width: calc(100% - 300px)"
      >
      <div class="nav">
        <div @click="tab1" :class="{pitchOn: tab === 1}">就业人员</div>
        <div @click="tab2" :class="{pitchOn: tab === 2}">待审核</div>
        <div @click="tab3" :class="{pitchOn: tab === 3}">删除人员</div>
      </div>
      <!-- 新增弹窗 -->
      <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form :model="ruleForm" :rules="ruless" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="新增方式" prop="way">
            <el-radio v-model="ruleForm.way" label="1">手动新增</el-radio>
            <el-radio v-model="ruleForm.way" label="2">导入数据</el-radio>
          </el-form-item>
          <el-form-item label="人员姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
            <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="标签" prop="label">
            <el-select v-model="ruleForm.label" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.tagName"
                :value="item.tagType">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号" prop="IDNumber">
            <el-input v-model="ruleForm.IDNumber"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="乡镇/街道" prop="villagesAndTowns">
            <el-input v-model="ruleForm.villagesAndTowns"></el-input>
          </el-form-item>
          <el-form-item label="村/社区" prop="village">
            <el-input v-model="ruleForm.village"></el-input>
          </el-form-item>
          <el-form-item label="务工地域" prop="trainAspiration">
            <el-select v-model="ruleForm.trainAspiration" placeholder="请选择">
              <el-option
                v-for="item in optionss"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训意愿" prop="train">
            <el-radio v-model="ruleForm.train" label="1">愿意</el-radio>
            <el-radio v-model="ruleForm.train" label="2">不愿意</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPersonnel">确 定</el-button>
        </span>
      </el-dialog>
        <!-- 表头区 -->
        <div style="margin-bottom:10px" class="flex bgFFF space-between mt10">
          <div class="flex flex-y-center">
            <div
              class="ml22"
              style="display: flex"
            >
              <el-button
                type="primary"
                @click="addEmployedPerson"
              >新增</el-button>
              <el-button
                type="primary"
                @click="addManager()"
              >导出</el-button>
              <el-button
                type="primary"
                @click="addManager()"
              >批量导入</el-button>
              <!-- <button-menu @handleTongbu="synchronizationqywxtxl"></button-menu> -->
            </div>
          </div>
          <div class="flex flex-y-center">
            <div class="flex flex-y-center mr22 button">
              <!-- <Input
                v-model="criteria.userName"
                class="search-input"
                style="width: 180px; border-radius: 2px 0 0 2px"
                clearable
                @on-clear="onSearch"
                placeholder="请输入名称"
              ></Input> -->
              <Button
                slot="append"
                @click="onSearch"
                icon="ios-search"
                style="
                  background: #fff;
                  padding: 0;
                  color: #999;
                  min-width: auto;
                  border-left: 0;
                  border-radius: 0 2px 2px 0;
                "
              ></Button>
            </div>
          </div>
        </div>
        <!-- 列表区 -->
        <!-- <BaseTable
          ref="table"
          :loading="tableLoading"
          v-model="criteria"
          :columns="columns"
          :data="data"
          @on-search="departmentMemberList"
          @changeData="changeData"
        >
        </BaseTable>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br> -->
        <el-table
        stripe
          :data="
            data.filter(
              (data) =>
                !search ||
                data.userName.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column
            label="用户姓名"
            prop="realName"
          > </el-table-column>
          <el-table-column
            label="身份证号"
            prop="idcardNo"
            width="180px"
          > </el-table-column>
          <el-table-column
            label="联系电话"
            prop="userSex"
          >
            <template slot-scope="scope">
              {{ scope.row.deptName }}
            </template>
          </el-table-column>
          <el-table-column
            label="户籍所在地"
            prop=""
            show-overflow-tooltip
          >
            <!-- <template slot-scope="scope">
              <span
                v-for="(item, index) in scope.row.roleList"
                :key="index"
              >
                {{
                  scope.row.roleList.length - 1 !== index
                    ? item.roleName + ","
                    : item.roleName
                }}
              </span>
            </template> -->
          </el-table-column>
          <el-table-column
            label="务工地域"
            prop="realName"
          > </el-table-column>
          <el-table-column
            label="培训意愿"
            prop="realName"
            width="80px"
          > </el-table-column>
          <el-table-column
            label="来源"
            prop="realName"
            width="80px"
          > </el-table-column>
          <el-table-column
            label="标签"
            prop="realName"
            width="80px"
          > </el-table-column>
          <el-table-column
            label="审核状态"
            prop="realName"
          > </el-table-column>
          <el-table-column
            label="变更记录"
            prop="realName"
          > </el-table-column>
          <el-table-column
            v-if="tab === 3"
            label="删除原因"
            prop="deleteCause"
          > </el-table-column>
          <!-- <el-table-column align="right">
            <template
              slot="header"
              slot-scope="scope"
            >
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
              />
            </template>
          </el-table-column> -->
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <span class="anniu" v-if="tab === 1">查看</span>
              <span class="anniu" v-if="tab === 1">编辑</span>
              <span class="anniu" v-if="tab === 2">审核</span>
              <span class="anniu" v-if="tab === 3">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="->, total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      
    </div>

    <!--  编辑抽屉  -->
    <base-modal
      ref="showDrawers"
      :loading="drawerLoading"
      v-model="showDrawers"
      @closeM="cancelBt('showDrawers')"
      @closeBt="cancelBt('showDrawers')"
      @submitBt="drawerSubmit"
      titleText="角色管理"
      :styles="{ width: '600px' }"
      class="roleModal"
    >
      <div class="flex flex-x-center">
        <Form
          ref="form"
          :rules="rules"
          :label-width="80"
          :model="form"
        >
          <!--          <FormItem prop="userName" label="用户姓名">
            <Input
              type="text"
              placeholder="请输入用户姓名"
              clearable
              maxlength="20"
              v-model="form.userName"
              style="width: 280px"
            /></FormItem>
          <FormItem prop="departmentIdList" label="单位">
            <Cascader
              placeholder="请选择单位"
              :data="deptListData"
              v-model="departmentIdList"
              style="width: 280px"
              change-on-select
              @on-change="cascaderChange"></Cascader>
          </FormItem>
          <FormItem prop="phone" label="联系电话">
            <Input
              type="text"
              placeholder="请输入联系电话"
              clearable
              maxlength="11"
              v-model="form.phone"
              style="width: 280px"
            /></FormItem>-->
          <FormItem
            prop="roleIdList"
            label="选择角色"
          >
            <Select
              v-model="form.roleIdList"
              multiple
              transfer
              style="width: 280px"
              placeholder="请选择角色"
            >
              <Option
                v-for="item in rolesList"
                :key="item.id"
                :value="item.id"
                :disabled="item.disabled"
              >
                {{ item.roleName }}
              </Option>
            </Select>
          </FormItem>
          <!--          <FormItem prop="enable" label="启用">
            <i-switch v-model="form.enable" :true-value="1" :false-value="0"></i-switch>
          </FormItem>-->
        </Form>
      </div>
    </base-modal>
    <!--  区域设置  -->
    <base-modal
      ref="areaModal"
      :loading="modalBtnLoading"
      v-model="areaModal"
      @closeM="cancelBt('areaModal')"
      @closeBt="cancelBt('areaModal')"
      @submitBt="okSave"
      titleText="区域管理"
      :styles="{ width: '800px' }"
      class="areaModal"
    >
      <Row :gutter="60">
        <Col
          span="12"
          style="border-right: 1px solid #eeeeee"
        >
        <Input
          type="text"
          v-model="areaSearchName"
          clearable
          placeholder="搜索区域"
        />
        <!-- <Tree :data="areaDeptListData" :render="renderContent" show-checkbox :check-strictly="true" multiple
                @on-check-change="treeCheckChange"></Tree> -->
        <el-tree
          :expand-on-click-node="false"
          check-on-click-node
          :data="areaDeptListData"
          :default-checked-keys="defaultcheckedkeys"
          show-checkbox
          :default-expanded-keys="defaultexpandedkeys"
          :check-strictly="true"
          node-key="qywechatDeptId"
          ref="trees"
          highlight-current
          @check="caozcheck"
          :filter-node-method="filterNode"
          style="height: 95%; overflow: auto; margin-top: 2%"
        >
        </el-tree>
        </Col>
        <Col
          span="12"
          style="overflow: auto"
        >
        <div class="color333 line16 mb26 mt6">
          已选：{{ treeCheckData.length }}个区域
        </div>
        <div>
          <div
            class="color333 line20 mb10"
            v-for="(item, index) in treeCheckData"
            :key="item.id"
          >
            {{ item.deptName }}
            <Icon
              type="md-close"
              color="#bbbbbb"
              size="12"
              class="ml10 curPointer"
              @click="removeTreeCheck(item, index)"
            />
          </div>
        </div>
        </Col>
      </Row>
    </base-modal>

    <el-dialog
      title="添加管理员"
      :visible.sync="addManagerDialog"
      :close-on-click-modal='false'
    >
      <el-form
        :model="addManagerForm"
        :rules="rules"
        ref="addManagerForm"
      >
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="addManagerForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          :label-width="formLabelWidth"
          prop="memberSex"
        >
          <el-radio v-model="addManagerForm.memberSex" label="1">男</el-radio>
          <el-radio v-model="addManagerForm.memberSex" label="2">女</el-radio>
          <el-radio v-model="addManagerForm.memberSex" label="3">保密</el-radio>
        </el-form-item>
        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="mobile"
        >
          <el-input
            v-model="addManagerForm.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
        v-if="flag"
          label="角色"
          :label-width="formLabelWidth"
          prop="roleList"
        >
        <el-select v-model="valueInput" placeholder="请选择">
          <el-option
            @click.native="changeRole"
            v-for="item in role"
            :key="item.value"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item
        v-if="flag"
          label="所在单位"
          :label-width="formLabelWidth"
          prop="qywechatDeptId"
        >
          <el-input
            v-model="addManagerForm.qywechatDeptId.deptName"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="out">取 消</el-button>
        <el-button
          type="primary"
          @click="addManagerSubmit('addManagerForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseDrawers from "_c/base-drawers/base-drawers";
import BaseModal from "_c/base-modal";
import orgStructure from "_c/orgStructure/orgStructure";
import FromOne from "@/libs/jss/FormValidation";
import { getStayAuditList, getRemoveList, addDepartmentMember, getrole, memberList, compileDepartmentMember, getEmployedPersonList, addEmployedPersonList, getTagList } from '@/api/data.js'

export default {
  components: {
    BaseDrawers,
    BaseModal,
    orgStructure,
  },
  data () {
    return {
      // 新增培训意愿
      train: '1',
      // 手动新增与导入数据单选
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      optionss: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      // tab字段
      TAB: 1,
      valuee: '',
      radio: '1',
      // 新增弹窗字段
      ruleForm: {
        // 方式
        way: '1',
        // 名字
        name: '',
        sex: '1',
        // 标签
        label: '',
        // 身份证号
        IDNumber: '',
        // 电话
        phone: '',
        // 乡镇
        villagesAndTowns: '',
        // 村
        village: '',
        // 务工地域
        trainAspiration: '',
        // 培训意愿
        train: '1'
      },
      total: '',
      id: '',
      deptName: '',
      search: "",
      selectedData: {},
      formLabelWidth: "120px",
      value: '',
      valueInput: '',
      // 添加管理员表单
      addManagerForm: {
        // 姓名
        name: "",
        // 性别
        memberSex: '1',
        // 手机号
        mobile: '',
        // 角色
        roleList: [],
        // 所属单位
        qywechatDeptId: {},
      },
      addManagerDialog: false,
      defaultexpandedkeys: [],
      xuanzlist: [],
      defaultcheckedkeys: [],
      btnLoading: false,
      tableLoading: false,
      data: [], // 列表绑定数据
      page: {
        page: 1,
        pageSize: 5
      },
      // 新增弹窗显示
      dialogVisible: false,
      /**
       * 查询条件
       */
      criteria: {
        total: 0,
        page: {
          current: 1,
          size: 10,
        },
        deptIdList: [], // 当前所选部门id
        userName: "无敌",
      },
      /**
       * 表格字段
       */
      columns: [
        {
          fixed: "left",
          title: "用户姓名",
          key: "userName",
          align: "left",
          minWidth: 125,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "所在单位",
          key: "departmentList",
          align: "left",
          minWidth: 125,
          render: (h, params) => {
            return h(
              "poptip",
              {
                props: {
                  trigger: "hover",
                  transfer: true,
                  placement: "bottom-start",
                },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: "100%",
                      textAlign: "left",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.departmentList.map(function (item, index) {
                      return h(
                        "span",
                        item.deptName +
                        (index == params.row.departmentList.length - 1
                          ? ""
                          : "，")
                      );
                    }),
                  ]
                ),
                h(
                  "div",
                  {
                    slot: "content",
                    style: {
                      width: "100%",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.departmentList.map(function (item) {
                      return h(
                        "div",
                        {
                          style: {
                            textAlign: "left",
                          },
                        },
                        item.deptName
                      );
                    }),
                  ]
                ),
              ]
            );
          },
        },
        /*{
          title: "联系方式",
          key: "",
          align: "left",
          minWidth: 125,
        },*/
        {
          title: "角色",
          key: "roleList",
          align: "left",
          minWidth: 125,
          render: (h, params) => {
            return h(
              "poptip",
              {
                props: {
                  trigger: "hover",
                  transfer: true,
                  placement: "bottom-start",
                },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: "100%",
                      textAlign: "left",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.roleList.map(function (item, index) {
                      return h(
                        "span",
                        item.roleName +
                        (index == params.row.roleList.length - 1 ? "" : "，")
                      );
                    }),
                  ]
                ),
                h(
                  "div",
                  {
                    slot: "content",
                    style: {
                      width: "100%",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      verticalAlign: "middle",
                      display: "inline-block",
                    },
                  },
                  [
                    params.row.roleList.map(function (item) {
                      return h(
                        "div",
                        {
                          style: {
                            textAlign: "left",
                          },
                        },
                        item.roleName
                      );
                    }),
                  ]
                ),
              ]
            );
          },
        },
        /*{
          title: "启用",
          key: "enable",
          slot: "switch",
          align: "left",
          minWidth: 125,
        },*/
      ],
      areaModal: false,
      deptListData: [], // 树结构
      departmentIdList: [],
      areaDeptListData: [], // 区域设置 树结构
      areaSearchName: "",
      modalData: {},
      treeCheckData: [],
      modalBtnLoading: false,

      regs: /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/,
      // 角色
      rolesList: [],
      role: [],
      // 编辑
      showDrawers: false,
      drawerLoading: false,
      form: {},
      searchForm: {
        name: '',
        contactWay: '',
        idCard: ''
      },
      flag: true,
      ruless: {
        name: [
          { required: true, message: "请输入人员姓名", trigger: "blur" }
        ],
        label: [
          { required: true, message: "请选择标签", trigger: "blur" }
        ],
        IDNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'blur' }
        ],
        villagesAndTowns: [
          { required: true, message: "请填写乡/镇", trigger: "blur" }
        ],
        village: [
          { required: true, message: "请填写村/社区", trigger: "blur" }
        ],
        trainAspiration: [
          { required: true, message: "请选择务工地域", trigger: "blur" }
        ]
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        memberSex: [
          { required: true, message: "请输入性别", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        roleList: [
          { required: true, message: "请选择您的角色", trigger: "blur" },
        ],
        roleIdList: [
          {
            type: "array",
            required: true,
            message: "请选择角色",
            trigger: "change",
          },
        ],
      },
      tab: 1
    };
  },
  watch: {
    areaSearchName (val) {
      // 搜索
      this.$refs.trees.filter(val);
    },
  },
  created () {
    let buttonMenu = this.buttonMenu(this.$route.name);
    console.log(buttonMenu.buttonRight[0]);
    console.log(this.$route.name);

    this.columns.push(this.columnMenu(buttonMenu.buttonRight, this, 200));
    console.log(this.columns);

    this.getRolesList();
    // 调用成员列表
    this.getMemberList()
    this.getTagIDList()
  },
  methods: {
    async searchButton() {
      const res = await getEmployedPersonList({
        page: {
          page: 1,
          pageSize: 10
        },
        realName: this.searchForm.name,
        userPhone: this.searchForm.contactWay,
        idCard: this.searchForm.idCard
      })
      console.log('gg', res);
      this.total = res.total
      this.data = res.records
    },
    // 点击就业人员
    tab1() {
      this.tab = 1
      this.getMemberList()
    },
    tab2() {
      this.tab = 2
      this.getStayAudit()
    },
    tab3() {
      this.tab = 3
      this.getRemove()
    },
    // 获取删除列表
    async getRemove() {
      const res = await getRemoveList({
        page: {
          page: 1,
          pageSize: 10
        }
      })
      this.data = res.records
    },
    // 获取待审核列表
    async getStayAudit() {
      const res = await getStayAuditList({
        page: {
          page: 1,
          pageSize: 10
        }
      })
      this.data = res.records
    },
    // 获取标签列表
    async getTagIDList() {
      const res = await getTagList({
        tagType: this.TAB
      })
      console.log('res', res);
      this.options = res
    },
    addPersonnel() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await addEmployedPersonList({
            userName: this.ruleForm.name,
            userPhone: this.ruleForm.phone,
            idcardNo: this.ruleForm.IDNumber,
            userSex: this.ruleForm.sex,
            tagIdList: this.label
          })
          console.log('新增', res);
        }
      })
      this.dialogVisible = false
    },
    // 新增就业人员
    addEmployedPerson() {
      this.dialogVisible = true
    },
    handleSizeChange(e) {
      this.page.pageSize = e
      this.getMemberList()
    },
    handleCurrentChange(e) {
      this.page.page = e
      this.getMemberList()
    },
    // 获取就业人员列表
    async getMemberList(user) {
      const res = await getEmployedPersonList({
        page: {
          page: 1,
          pageSize: 10
        }
      })
      console.log('gg', res);
      this.total = res.total
      this.data = res.records
    },
    // 取消新增管理员
    out() {
      this.addManagerDialog = false
      this.addManagerForm =  {
        // 姓名
        name: "",
        // 性别
        memberSex: '1',
        // 手机号
        mobile: '',
        // 角色
        roleList: [],
        // 所属单位
        qywechatDeptId: {},
      },
      this.$refs.addManagerForm.clearValidate()
    },
    // 角色选项下拉框选中触发的事件
    changeRole(e) {
      // console.log(e);
      console.log('选项选中了');
      this.addManagerForm.roleList.pop()
      this.addManagerForm.roleList.push(this.valueInput)
    },
    // 枚举
    // stateFormat(data) {
    //   if (data == 1) {
    //     return "男";
    //   } else if (data == 2) {
    //     return "女";
    //   } else {
    //     return ""
    //   }
    // },
    // 添加新的部门成员
    async AddMember() {
      const res = await addDepartmentMember({
        name: this.addManagerForm.name,
        memberSex: this.addManagerForm.memberSex,
        mobile: this.addManagerForm.mobile,
        roleList: this.addManagerForm.roleList,
        qywechatDeptId: this.addManagerForm.qywechatDeptId.qywechatDeptId
      })
      console.log('添加新的部门成员', res);
      this.addManagerDialog = false
      this.getMemberList()
    },
    // 编辑部门成员
    async rolesEdit (i, data) {
      this.flag = false
      console.log(data);
      this.addManagerForm.name = data.name
      this.addManagerForm.memberSex = String(data.memberSex)
      this.addManagerForm.mobile = data.mobile
      this.id = data.memberId
      this.addManagerDialog = true
    },
    async addManagerSubmit (addManagerForm) {
      if (this.flag = true) {
        this.$refs[addManagerForm].validate(valid => {
        if (valid) {
          this.AddMember()
        } else {
          return false;
        }
      })
      } else {
        const res = await compileDepartmentMember({
          name: this.addManagerForm.name,
          memberSex: parseInt(this.addManagerForm.memberSex),
          mobile: this.addManagerForm.mobile,
          id: this.id
      })
      console.log('编辑部门成员', res);
      }
    },
    // 添加管理员
    async addManager () {
      this.flag = true
      this.addManagerDialog = true;
      this.addManagerForm.qywechatDeptId = this.selectedData
      console.log(this.selectedData);
      const res = await getrole({})
      console.log('管理员部分角色列表', res);
      this.role = res
    },
    caozcheck (e, r) {
      this.treeCheckData = r.checkedNodes;
      this.xuanzlist = r.checkedKeys;
    },
    // 区域管理 数据回显
    deep (node) {
      node.map((item) => {
        this.$set(item, "checked", false);
        if (this.treeCheckData.length) {
          this.treeCheckData.map((v) => {
            if (v.qywechatDeptId == item.qywechatDeptId) {
              this.$set(item, "checked", true);
            } else if (item.children.length) {
              this.deep(item.children);
            }
          });
        } else if (item.children.length) {
          this.deep(item.children);
        }
      });
    },
    getDeptListData (data) {
      this.deptListData = this.dataProcessing(data);
    },
    // 下拉框树结构数据处理
    dataProcessing (data) {
      data.forEach((item) => {
        item["label"] = item.deptName;
        item["value"] = item.qywechatDeptId.toString();
        if (item.children.length > 0) {
          this.dataProcessing(item.children);
        }
      });
      return data;
    },
    cascaderChange (data) {
      if (data.length) {
        this.form.departmentIdList = data[data.length - 1];
      } else {
        this.form.departmentIdList = "";
        this.departmentMemberList();
      }
    },
    onTreeSearch (data) {
      this.selectedData = data;
      this.
      this.criteria.deptIdList = data.deptIdSet.length
        ? data.deptIdSet
        : [data.qywechatDeptId];
      this.criteria.page.current = 1;
      this.criteria.total = 0;
      this.criteria.userName = "";
      this.departmentMemberList();
    },
    onSearch () {
      this.criteria.page.current = 1;
      this.criteria.total = 0;
      this.departmentMemberList();
    },
    // 员工列表
    async departmentMemberList () {
      this.tableLoading = true;
      const res = await getrole({})
      console.log('角色列表', res);
      this.deptList = res
      console.log('deptList', this.deptList);
    },
    // departmentMemberList () {
    //   this.tableLoading = true;
    //   let data = {
    //     ...this.criteria,
    //   };
    //   this.APIS.departmentMemberList(data)
    //     .then((res) => {
    //       this.tableLoading = false;
    //       if (res.code == 20000) {
    //         this.criteria.total = res.data.total;
    //         this.data = res.data.records;
    //         console.log(this.data);
    //       } else {
    //         this.$Message.error(res.message);
    //       }
    //     })
    //     .catch((err) => {
    //       this.tableLoading = false;
    //     });
    // },
    // 同步企业微信通讯录
    synchronizationqywxtxl () {
      this.btnLoading = true;
      this.APIS.addressbooks().then((res) => {
        this.btnLoading = false;
        if (res.code == 20000) {
          this.$Message.success("同步成功！");
          this.criteria = {
            total: 0,
            page: {
              current: 1,
              size: 10,
            },
            deptIdList: [], // 当前所选部门id
            userName: "",
          };
          this.$refs.orgStructure.departmentList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    //角色
    getRolesList () {
      this.APIS.roleslist().then((res) => {
        this.rolesList = res.data;
      });
    },
    // 编辑//角色管理
    handleEdit (params) {
      console.log('数据', params);
      console.log('编辑');
      this.form = params;
      if (this.form.roleList) {
        this.form.roleIdList = this.form.roleList.map((item) => item.id);
      }
      if (this.form.departmentList) {
        this.form.departmentIdList = this.form.departmentList.map(
          (item) => item.id
        );
      }
      this.drawerLoading = false;
      if (this.rolesList.length) {
        this.rolesList.map((item) => {
          let parm = this.form.roleList.find(
            (v) => v.roleCode == item.roleCode
          );
          item.disabled = parm ? (parm.type == 1 ? true : false) : false;
          return item;
        });
      }
      this.showDrawers = true;
    },
    drawerSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.drawerLoading = true;
          let data = {
            userId: this.form.id,
            roleIdList: this.form.roleIdList,
          };
          this.APIS.userLoginUpdate(data).then((res) => {
            this.drawerLoading = false;
            if (res.code == 20000) {
              this.$Message.success("编辑成功");
              this.cancelBt("showDrawers");
              this.departmentMemberList();
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    changeData (data) {
      console.log(data);
    },
    renderContent (h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            color: "#333333",
          },
        },
        data.deptName
      );
    },
    treeCheckChange (data) {
      this.treeCheckData = data;
    },
    // 区域管理弹框右侧列表选项后的X
    removeTreeCheck (item, index) {
      this.treeCheckData.splice(index, 1);
      // for(let i = 0;i<this.defaultcheckedkeys.length;i++){
      //   if(item.qywechatDeptId == this.defaultcheckedkeys[i]){
      //     this.defaultcheckedkeys.splice(i, 1);
      //   }
      // }
      let choiseCheckList = this.$refs.trees.getCheckedNodes();
      choiseCheckList.forEach((items, inx) => {
        if (item.qywechatDeptId == items.qywechatDeptId) {
          choiseCheckList.splice(inx, 1);
          this.$nextTick(() => {
            this.$refs.trees.setCheckedNodes(choiseCheckList);
          });
        }
      });
      this.xuanzlist = [];
      choiseCheckList.forEach((items, inx) => {
        this.xuanzlist.push(items.qywechatDeptId);
      });
    },
    // 编辑 //区域管理
    handleManage (params) {
      console.log('编辑区域', params);
      this.modalData = params;
      this.managementRegionDetail(params);
    },
    managementRegionDetail (params) {
      this.APIS.managementRegionDetail({ userId: params.id }).then((res) => {
        if (res.code == 20000) {
          this.modalBtnLoading = false;
          this.areaDeptListData = JSON.parse(JSON.stringify(this.deptListData));
          this.treeCheckData = res.data;
          this.defaultcheckedkeys = [];
          for (let i = 0; i < res.data.length; i++) {
            this.defaultcheckedkeys.push(res.data[i].qywechatDeptId);
          }
          this.defaultexpandedkeys = [this.deptListData[0].qywechatDeptId];
          this.areaModal = true;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 搜索
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    areaSearch () {
      this.APIS.departmentList({ name: this.areaSearchName }).then((res) => {
        if (res.code == 20000) {
          this.areaDeptListData = this.dataProcessing(res.data);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 关闭抽屉
    cancelBt (drawerName) {
      this[drawerName] = false;
    },
    // 审核通过
    okSave () {
      let data = {
        userId: this.modalData.id, //指定某个人
        deptIdList: this.xuanzlist,
      };
      // if (this.treeCheckData.length > 0) {
      //   data.deptIdList = this.treeCheckData.map(item => item.qywechatDeptId) //辖区id集合
      // }
      this.modalBtnLoading = true;
      this.APIS.managementRegion(data).then((res) => {
        this.modalBtnLoading = false;
        if (res.code == 20000) {
          this.$Message.success("设置成功！");
          this.areaModal = false;
          this.departmentMemberList();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  background-color: #ccc;
}
// @import "index";
.contabox {
  height: 100%;
  background: #fff;
  border-radius: 4px;
}
.roleModal {
  /deep/ .ivu-modal-body {
    height: 280px;
    padding: 30px;
    overflow: auto;
  }
}

.areaModal {
  /deep/ .ivu-modal-body {
    height: 390px;
    padding: 20px 30px;
    overflow: auto;
  }

  /deep/ .ivu-row,
  /deep/ .ivu-col {
    height: 100%;
  }
}
.bdradius4 {
  border-bottom: 10px solid #f0f2f5;
  widows: 80%;
}
.inp {
  display: flex;
  margin-top: 20px;
  border-bottom: 10px solid #f0f2f5;
}
.inp .el-form {
  display: flex;
  justify-content: unset;
}
.inp .el-form .el-form-item {
  width: 18%;
}
.inp div {
  // margin-top: 6px;
  // line-height: 28px;
  margin-left: 10px;
}
.inp div button {
  margin-top: 6px;
  line-height: 0px;
  text-align: center;
}
.inp button {
  height: 28px;
}
.inp el-form el-input {
  width: 10%;
}
.pitchOn {
  color: #0000ff;
}
.nav {
  display: flex;
  justify-content: start;
  padding: 20px 0;
}
.nav div {
  font-size: 20px;
  font-weight: 700;
}
.ml22 {
  margin-left: 0;
}
.nav div:nth-child(2) {
  padding-left: 15px;
}
.nav div:nth-child(3) {
  padding-left: 15px;
}
.el-select {
  width: 100%
}
.input {
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 28px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}

.divInput {
  height: 28px;
}
.divInput .el-input__inner {
  // height: 28px !important;
  height: 28px !important;
}
.anniu:nth-child(n+2) {
  padding-left: 5px;
}
</style>
